<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .list-item {
      display: inline-block;
      margin-right: 10px;
      background-color: red;
      border-radius: 50%;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      color: #fff;
    }
    /* 元素定位改变时动画 */
    .list-move {
      transition: transform 1s;
    }
  </style>
  <script src="lodash.js"></script>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click="shuffle">洗牌</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" :key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data () {
        return { items: [1, 2, 3, 4, 5] }
      },
      methods: {
        shuffle () {
          // shuffle()函数把数组中的元素按随机顺序重新排列
          this.items = _.shuffle(this.items)
          //lodash库中还有很多对数组操作的方法，可以尝试如
          // _.compact(array)：移除数组中的所有假值（如 false, null, 0, "", undefined 和 NaN）。
          // _.concat(array, [values])：连接两个数组。
          // _.difference(array, [values])：返回两个数组的差异部分。
          //  _.isEqual(value, other)：比较两个值是否相等。
          // _.isEmpty(value)：检查值是否为空。
          // _.isFunction(value)：检查值是否为函数
        }
      }
    })
  </script>
</body>
</html>